<template>
	<view class="parking-list-page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper" @click="goToSearch">
				<text class="search-icon">🔍</text>
				<text class="search-placeholder">搜索停车场名称或地址</text>
			</view>
		</view>

		<!-- 筛选和排序栏 -->
		<view class="filter-sort-bar">
			<view class="filter-section">
				<view class="filter-item" @click="showCategoryFilter = true">
					<text class="filter-text">{{ selectedCategory ? selectedCategory.name : '分类' }}</text>
					<text class="filter-arrow">▼</text>
				</view>
				<view class="filter-item" @click="showPriceFilter = true">
					<text class="filter-text">{{ priceFilterText }}</text>
					<text class="filter-arrow">▼</text>
				</view>

			</view>
			<view class="sort-section">
				<view class="sort-item" @click="showSortOptions = true">
					<text class="sort-text">{{ sortText }}</text>
					<text class="sort-arrow">▼</text>
				</view>
			</view>
		</view>

		<!-- 停车场列表 -->
		<scroll-view
			class="parking-list"
			scroll-y="true"
			@scrolltolower="loadMore"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 加载状态 -->
			<view v-if="loading && parkingList.length === 0" class="loading-container">
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 停车场卡片列表 -->
			<view v-else-if="parkingList.length > 0" class="parking-cards">
				<view
					class="parking-card"
					v-for="parking in parkingList"
					:key="parking.id"
					@click="goToDetail(parking.id)"
				>
					<!-- 卡片布局：左侧图片，右侧信息 -->
					<view class="card-layout">
						<!-- 左侧图片 -->
						<view class="card-image">
							<image
								:src="getImageUrl(parking.image_urls, parking)"
								mode="aspectFill"
								class="parking-image"
								@error="handleImageError"
							/>
						</view>
						
						<!-- 右侧信息 -->
						<view class="card-content">
							<!-- 第一行：停车场名称 -->
							<view class="info-row-top">
								<text class="parking-name">{{ parking.name }}</text>
							</view>
							
							<!-- 第二行：距离和评分信息 -->
							<view class="info-row-middle">
								<text class="distance-text" v-if="parking.rating">{{ parking.rating }}分</text>
								<text class="distance-text" v-if="parking.distance">距机场{{ parking.distance }}km</text>
								<text class="distance-text" v-if="parking.shuttle_time_minutes">接送车约{{ parking.shuttle_time_minutes }}分钟</text>
								<text class="distance-text" v-else-if="!parking.distance && !parking.shuttle_time_minutes">平均接送耗时3-5分钟</text>
							</view>
							
							<!-- 第三行：标签信息 -->
							<view class="info-row-middle">
								<view class="tag-list">
									<text class="tag-item">车位{{ parking.total_spaces || 0 }}</text>
									<text class="tag-item">可停留</text>
								</view>
							</view>
							
							<!-- 第四行：服务设施标签 -->
							<view class="info-row-middle" v-if="getFacilitiesTags(parking).length > 0">
								<view class="facilities-tags">
									<text
										class="facility-tag"
										v-for="(tag, tagIndex) in getFacilitiesTags(parking)"
										:key="tagIndex"
									>
										{{ tag }}
									</text>
								</view>
							</view>
							
							<!-- 第五行：价格信息 -->
							<view class="info-row-bottom">
								<view class="price-section">
									<text class="price-label">7天均价</text>
									<text class="price-value">{{ formatPrice(parking) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else-if="!loading" class="empty-container">
				<text class="empty-icon">🚗</text>
				<text class="empty-text">暂无停车场数据</text>
				<text class="empty-tip">试试调整筛选条件</text>
			</view>

			<!-- 加载更多 -->
			<view v-if="loading && parkingList.length > 0" class="load-more">
				<text class="load-more-text">加载中...</text>
			</view>

			<!-- 没有更多数据 -->
			<view v-if="!hasMore && parkingList.length > 0" class="no-more">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>

		<!-- 分类筛选弹窗 -->
		<view v-if="showCategoryFilter" class="filter-modal" @click="showCategoryFilter = false">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<text class="filter-title">选择分类</text>
					<text class="filter-close" @click="showCategoryFilter = false">✕</text>
				</view>
				<view class="filter-options">
					<view
						class="filter-option"
						:class="{ active: !selectedCategory }"
						@click="selectCategory(null)"
					>
						<text class="option-text">全部分类</text>
					</view>
					<view
						class="filter-option"
						v-for="category in categories"
						:key="category.id"
						:class="{ active: selectedCategory && selectedCategory.id === category.id }"
						@click="selectCategory(category)"
					>
						<text class="option-text">{{ category.name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 价格筛选弹窗 -->
		<view v-if="showPriceFilter" class="filter-modal" @click="showPriceFilter = false">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<text class="filter-title">价格范围</text>
					<text class="filter-close" @click="showPriceFilter = false">✕</text>
				</view>
				<view class="filter-options">
					<view
						class="filter-option"
						:class="{ active: !priceRange.min && !priceRange.max }"
						@click="selectPriceRange(null, null)"
					>
						<text class="option-text">不限价格</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: priceRange.min === 0 && priceRange.max === 5 }"
						@click="selectPriceRange(0, 5)"
					>
						<text class="option-text">¥0-5/小时</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: priceRange.min === 5 && priceRange.max === 10 }"
						@click="selectPriceRange(5, 10)"
					>
						<text class="option-text">¥5-10/小时</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: priceRange.min === 10 && priceRange.max === 20 }"
						@click="selectPriceRange(10, 20)"
					>
						<text class="option-text">¥10-20/小时</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: priceRange.min === 20 && !priceRange.max }"
						@click="selectPriceRange(20, null)"
					>
						<text class="option-text">¥20以上/小时</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 排序选项弹窗 -->
		<view v-if="showSortOptions" class="filter-modal" @click="showSortOptions = false">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<text class="filter-title">排序方式</text>
					<text class="filter-close" @click="showSortOptions = false">✕</text>
				</view>
				<view class="filter-options">

					<view
						class="filter-option"
						:class="{ active: sortBy === 'price' }"
						@click="selectSort('price')"
					>
						<text class="option-text">按价格排序</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: sortBy === 'rating' }"
						@click="selectSort('rating')"
					>
						<text class="option-text">按评分排序</text>
					</view>
					<view
						class="filter-option"
						:class="{ active: sortBy === 'created_at' }"
						@click="selectSort('created_at')"
					>
						<text class="option-text">按最新排序</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onPullDownRefresh, onShow, onLoad } from '@dcloudio/uni-app'
import { getParkingLots, getParkingCategories } from '../../api/parking.js'
import { getFullImageUrl } from '../../utils/request.js'

// 响应式数据
const parkingList = ref([])
const categories = ref([])
const loading = ref(false)
const refreshing = ref(false)
const currentPage = ref(1)
const hasMore = ref(true)

// 页面参数
const pageParams = ref({
	type: '', // 'airport' 或 'railway'
	categoryId: null, // 分类ID
	categoryName: '' // 分类名称
})


// 筛选和排序状态
const selectedCategory = ref(null)
const priceRange = ref({ min: null, max: null })
const sortBy = ref('created_at')

// 弹窗显示状态
const showCategoryFilter = ref(false)
const showPriceFilter = ref(false)
const showSortOptions = ref(false)

// 计算属性
const priceFilterText = computed(() => {
	if (!priceRange.value.min && !priceRange.value.max) {
		return '价格'
	}
	if (priceRange.value.min && priceRange.value.max) {
		return `¥${priceRange.value.min}-${priceRange.value.max}`
	}
	if (priceRange.value.min && !priceRange.value.max) {
		return `¥${priceRange.value.min}以上`
	}
	return '价格'
})



const sortText = computed(() => {
	const sortMap = {
		'price': '价格',
		'rating': '评分',
		'created_at': '最新'
	}
	return sortMap[sortBy.value] || '排序'
})

// 页面方法
const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}

const goToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/detail/detail?id=${id}`
	})
}



// 格式化图片URL（与首页getStationImage函数保持一致的逻辑）
const getImageUrl = (images, parking) => {
	// 如果有图片URL，使用第一张
	if (images && Array.isArray(images) && images.length > 0) {
		return getFullImageUrl(images[0])
	}

	// 如果images是字符串，尝试解析
	if (images && typeof images === 'string') {
		try {
			const imageList = JSON.parse(images)
			if (Array.isArray(imageList) && imageList.length > 0) {
				return getFullImageUrl(imageList[0])
			}
		} catch {
			// 解析失败，当作单个URL处理
			return getFullImageUrl(images)
		}
	}

	// 根据停车场名称返回对应的默认图片（与首页逻辑一致）
	const name = parking?.name || ''
	if (name.includes('浦东')) return '/static/stations/pudong-airport.svg'
	if (name.includes('大兴')) return '/static/stations/daxing-airport.svg'
	if (name.includes('萧山')) return '/static/stations/xiaoshan-airport.svg'
	if (name.includes('咸阳')) return '/static/stations/xianyang-airport.svg'

	// 默认图片
	return '/static/parking-default.svg'
}



	// 是否展示地址（预留钩子，当前始终展示）
	const shouldShowAddress = (parking: any) => {
		return true
	}


// 规范化价格规则（兼容字符串/对象）
const getNormalizedPriceRules = (parking) => {
	const raw = parking && parking.price_rules
	if (!raw) return null
	if (typeof raw === 'string') {
		try { return JSON.parse(raw) } catch { return null }
	}
	if (typeof raw === 'object') return raw
	return null
}

// 检查是否为累计天数收费模式（兼容缺少 type 但有 daily_prices 的情况，支持24小时计费）
const isCumulativePricing = (parking) => {
	const rules = getNormalizedPriceRules(parking)
	return !!(rules && (rules.type === 'cumulative_daily' || rules.type === 'rolling_24h' || rules.daily_prices))
}

// 获取价格标签
const getPriceLabel = (parking) => {
	if (isCumulativePricing(parking)) {
		return '7天均价'
	}
	return '起步价'
}

// 获取价格单位（已不在模板中直接使用，保留以兼容旧调用）
const getPriceUnit = (parking) => {
	return isCumulativePricing(parking) ? '/天' : '/小时'
}

// 格式化价格显示（返回完整展示文本，数值时包含“¥”和单位）
const formatPrice = (parking) => {
	const rules = getNormalizedPriceRules(parking)

	// 新：累计天数价格（列表页按"7天均价：约最低均价/天"展示，支持24小时计费）
	if (rules && (rules.type === 'cumulative_daily' || rules.type === 'rolling_24h' || rules.daily_prices)) {
		// 室内外分别定价：用第7天累计价/7，取最小均价
		if (rules.indoor_outdoor_enabled && rules.indoor_prices && rules.outdoor_prices) {
			const indoorPrices = rules.indoor_prices.daily_prices
			const outdoorPrices = rules.outdoor_prices.daily_prices
			if (indoorPrices && outdoorPrices) {
				const indoorDay7 = Number(indoorPrices.day_7 || 0)
				const outdoorDay7 = Number(outdoorPrices.day_7 || 0)
				const avgs = [indoorDay7, outdoorDay7].filter(v => v > 0).map(v => v / 7)
				if (avgs.length === 0) return '面议'
				const minAvg = Math.min(...avgs)
				return `¥${Math.round(minAvg)}/天`
			}
		}
		// 统一定价（取第7天累计价/7）
		const dailyPrices = rules.daily_prices
		if (dailyPrices) {
			const day7Price = Number(dailyPrices.day_7 || 0)
			if (day7Price <= 0) return '面议'
			return `¥${Math.round(day7Price / 7)}/天`
		}
	}

	// 旧：按小时的规则数组
	if (rules && Array.isArray(rules) && rules.length > 0) {
		const prices = rules.map((rule) => Number(rule.price_per_hour) || 0)
		const minPrice = Math.min(...prices)
		const maxPrice = Math.max(...prices)
		if (minPrice === maxPrice) return `¥${minPrice.toFixed(2)}/小时`
		return `¥${minPrice.toFixed(2)}-${maxPrice.toFixed(2)}/小时`
	}

	// 兼容旧字段
	if (parking.hourly_rate) return `¥${Number(parking.hourly_rate).toFixed(2)}/小时`
	if (parking.price) return `¥${Number(parking.price).toFixed(2)}/小时`

	return '面议'
}

// 检查是否启用了室内外分别定价
const hasIndoorOutdoorPricing = (parking) => {
	return parking.price_rules &&
		   parking.price_rules.indoor_outdoor_enabled &&
		   parking.price_rules.indoor_prices &&
		   parking.price_rules.outdoor_prices
}



// 筛选和排序方法
const selectCategory = (category: any) => {
	selectedCategory.value = category
	showCategoryFilter.value = false
	resetAndLoadData()
}

const selectPriceRange = (min: number | null, max: number | null) => {
	priceRange.value = { min, max }
	showPriceFilter.value = false
	resetAndLoadData()
}



const selectSort = (sort: string) => {
	sortBy.value = sort
	showSortOptions.value = false
	resetAndLoadData()
}

// 重置并加载数据
const resetAndLoadData = () => {
	currentPage.value = 1
	hasMore.value = true
	parkingList.value = []
	loadParkingList()
}

// 加载停车场分类
const loadCategories = async () => {
	try {
		const response = await getParkingCategories()
		if (response.success) {
			categories.value = response.data || []
		}
	} catch (error) {
		console.error('获取分类失败:', error)
	}
}

// 加载停车场列表
const loadParkingList = async (isLoadMore = false) => {
	if (loading.value) return

	loading.value = true

	try {
		// 构建查询参数
		const params: any = {
			page: currentPage.value,
			limit: 10
		}

		// 添加分类筛选
		if (selectedCategory.value) {
			params.categoryId = selectedCategory.value.id
		}

		// 添加排序
		params.sortBy = sortBy.value



		const response = await getParkingLots(params)

		if (response.success) {
			let newData = response.data.list || response.data || []

			// 价格筛选（前端过滤）
			if (priceRange.value.min !== null || priceRange.value.max !== null) {
				newData = newData.filter(item => {
					// 检查是否为累计天数收费模式
					if (isCumulativePricing(item)) {
						const dailyPrices = item.price_rules.daily_prices
						if (dailyPrices) {
							const day1Price = dailyPrices.day_1 || 0
							const day7Price = dailyPrices.day_7 || 0

							// 对于累计天数收费，使用第1天价格进行筛选
							const priceToCheck = day1Price

							if (priceRange.value.min !== null && priceToCheck < priceRange.value.min) {
								return false
							}
							if (priceRange.value.max !== null && priceToCheck > priceRange.value.max) {
								return false
							}
							return true
						}
					}

					// 兼容旧的小时费率价格规则
					if (item.price_rules && Array.isArray(item.price_rules) && item.price_rules.length > 0) {
						const prices = item.price_rules.map(rule => Number(rule.price_per_hour) || 0)
						const minPrice = Math.min(...prices)
						const maxPrice = Math.max(...prices)

						if (priceRange.value.min !== null && maxPrice < priceRange.value.min) {
							return false
						}
						if (priceRange.value.max !== null && minPrice > priceRange.value.max) {
							return false
						}
						return true
					}

					// 兼容旧的hourly_rate字段
					const price = parseFloat(item.hourly_rate) || 0
					if (priceRange.value.min !== null && price < priceRange.value.min) {
						return false
					}
					if (priceRange.value.max !== null && price > priceRange.value.max) {
						return false
					}
					return true
				})
			}

			// 前端排序（针对价格和评分）
			if (sortBy.value === 'price' || sortBy.value === 'rating') {
				newData = newData.sort((a, b) => {
					if (sortBy.value === 'price') {
						const getPriceForSort = (item) => {
							// 检查是否为累计天数收费模式
							if (isCumulativePricing(item)) {
								const dailyPrices = item.price_rules.daily_prices
								if (dailyPrices) {
									// 使用第1天价格进行排序
									return dailyPrices.day_1 || 0
								}
							}

							// 兼容旧的小时费率价格规则
							if (item.price_rules && Array.isArray(item.price_rules) && item.price_rules.length > 0) {
								const prices = item.price_rules.map(rule => Number(rule.price_per_hour) || 0)
								return Math.min(...prices) // 按最低价格排序
							}

							// 兼容旧的hourly_rate字段
							return parseFloat(item.hourly_rate) || 0
						}
						return getPriceForSort(a) - getPriceForSort(b) // 价格从低到高
					}

					if (sortBy.value === 'rating') {
						const ratingA = parseFloat(a.rating) || 0
						const ratingB = parseFloat(b.rating) || 0
						return ratingB - ratingA // 评分从高到低
					}

					return 0
				})
			}

			hasMore.value = response.data.page < response.data.totalPages

			if (isLoadMore) {
				parkingList.value = [...parkingList.value, ...newData]
			} else {
				parkingList.value = newData
			}
		}
	} catch (error) {
		console.error('获取停车场列表失败:', error)
		// 静默处理错误，不显示提示
	} finally {
		loading.value = false
		refreshing.value = false
	}
}

// 加载更多
const loadMore = () => {
	if (!hasMore.value || loading.value) return

	currentPage.value++
	loadParkingList(true)
}

// 下拉刷新
const onRefresh = () => {
	refreshing.value = true
	resetAndLoadData()
}

// 页面加载时处理参数
onLoad((options) => {
	console.log('列表页接收到的参数:', options)

	// 处理页面参数
	if (options.type) {
		pageParams.value.type = options.type
	}
	if (options.categoryId) {
		pageParams.value.categoryId = parseInt(options.categoryId)
		// 如果有分类ID，设置为选中状态
		selectedCategory.value = { id: parseInt(options.categoryId) }
	}
	if (options.categoryName) {
		pageParams.value.categoryName = decodeURIComponent(options.categoryName)
		// 更新选中分类的名称
		if (selectedCategory.value) {
			selectedCategory.value.name = pageParams.value.categoryName
		}
	}
})

// 生命周期
onMounted(async () => {
	// 加载分类数据
	await loadCategories()

	// 加载停车场列表
	await loadParkingList()
})

onShow(() => {
	// 检查是否有从分类选择页传来的参数
	const storedParams = uni.getStorageSync('listPageParams')
	if (storedParams) {
		console.log('从本地存储获取到参数:', storedParams)

		// 更新页面参数
		pageParams.value.type = storedParams.type || ''
		pageParams.value.categoryId = storedParams.categoryId || null
		pageParams.value.categoryName = storedParams.categoryName || ''

		// 如果有分类ID，设置为选中状态
		if (storedParams.categoryId) {
			selectedCategory.value = {
				id: storedParams.categoryId,
				name: storedParams.categoryName
			}
		}

		// 清除存储的参数，避免重复使用
		uni.removeStorageSync('listPageParams')

		// 重新加载数据
		resetAndLoadData()
	} else {
		// 页面显示时刷新数据
		resetAndLoadData()
	}
})

// 下拉刷新处理
onPullDownRefresh(() => {
	onRefresh()
	uni.stopPullDownRefresh()
})

// 获取服务设施标签
const getFacilitiesTags = (parking: any) => {
	const tags: string[] = []

	if (parking.service_facilities && Array.isArray(parking.service_facilities)) {
		const facilityMap: Record<string, string> = {
			'has_charging_pile': '充电桩',
			'is_24_hours': '24小时',
			'has_camera': '监控',
			'is_indoor': '室内',
			'has_24h_shuttle': '24H接送',
			'has_staff_on_duty': '专人值守',
			'has_surveillance': '监控',
			'has_7_seat_shuttle': '7座接送',
			'has_5_seat_shuttle': '5座接送',
			'has_parking_invoice': '发票',
			'walking_distance': '步行即达'
		}

		parking.service_facilities.forEach((facility: string) => {
			if (facilityMap[facility]) {
				tags.push(facilityMap[facility])
			}
		})
	}

	return tags.slice(0, 10)
}

// 构造"距离/接送/设施"一行文本
const getMetaLine = (parking: any) => {
	const parts: string[] = []
	const distance = parking?.airport_distance_km ?? parking?.station_distance_km
	if (distance !== null && distance !== undefined) {
		parts.push(`距机场约${Number(distance).toFixed(1)}公里`)
	}
	if (parking?.shuttle_time_minutes !== null && parking?.shuttle_time_minutes !== undefined) {
		parts.push(`接送车约${parking.shuttle_time_minutes}分钟`)
	}
	const map: Record<string, string> = {
		'has_charging_pile': '充电桩',
		'is_24_hours': '24小时',
		'has_camera': '监控',
		'is_indoor': '室内',
		'has_24h_shuttle': '24小时免费接送',
		'has_staff_on_duty': '专人值守',
		'has_surveillance': '监控',
		'has_7_seat_shuttle': '7座接送',
		'has_5_seat_shuttle': '5座接送',
		'has_parking_invoice': '发票',
		'walking_distance': '步行即达'
	}
	if (Array.isArray(parking?.service_facilities) && parking.service_facilities.length) {
		const names: string[] = []
		const facilities: string[] = parking.service_facilities
		// 重要信息优先单独展示
		if (facilities.includes('has_24h_shuttle')) {
			parts.unshift('24小时免费接送')
		}
		for (const key of facilities) {
			if (key === 'has_24h_shuttle') continue // 避免重复
			if (map[key] && !names.includes(map[key])) names.push(map[key])
		}
		if (names.length) parts.push(`设施：${names.slice(0, 3).join('/')}`)
	}
	return parts.join(' · ')
}

// 处理图片加载错误
const handleImageError = (e: any) => {
	console.log('停车场图片加载失败:', e)
	// 设置默认图片
	e.target.src = '/static/parking-default.svg'
}

</script>

<style scoped>
.parking-list-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 搜索栏样式 */
.search-bar {
	background-color: #fff;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.search-input-wrapper {
	background-color: #f8f8f8;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
}

.search-icon {
	font-size: 32rpx;
	color: #999;
	margin-right: 20rpx;
}

.search-placeholder {
	font-size: 28rpx;
	color: #999;
	flex: 1;
}

/* 筛选和排序栏样式 */
.filter-sort-bar {
	background-color: #fff;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.filter-section {
	display: flex;
	gap: 20rpx;
}

.filter-item, .sort-item {
	padding: 12rpx 24rpx;
	background-color: #f8f8f8;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.filter-text, .sort-text {
	font-size: 26rpx;
	color: #333;
}

.filter-arrow, .sort-arrow {
	font-size: 20rpx;
	color: #666;
}

/* 停车场列表样式 */
.parking-list {
	flex: 1;
	padding: 20rpx;
}

.parking-cards {
	display: flex;
	flex-direction: column;
	gap: 2rpx;
	background: #f5f5f5;
}

.parking-card {
	background-color: #fff;
	margin-bottom: 1rpx;
}

/* 卡片横向布局 */
.card-layout {
	display: flex;
	padding: 24rpx 20rpx;
	gap: 24rpx;
	align-items: flex-start;
}

/* 左侧图片 */
.card-image {
	width: 240rpx;
	height: 220rpx;
	border-radius: 12rpx;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.parking-image {
	width: 100%;
	height: 100%;
}

/* 右侧内容 */
.card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	min-width: 0;
	min-height: 220rpx;
	justify-content: space-between;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.parking-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 40rpx;
}

.rating-section {
	display: flex;
	align-items: center;
	gap: 4rpx;
}

.rating-score {
	font-size: 28rpx;
	color: #ff6b35;
	font-weight: bold;
}

.rating-star {
	font-size: 24rpx;
}

.parking-address {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.address-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.address-text {
	font-size: 26rpx;
	color: #666;
	flex: 1;
}

.parking-info {
	display: flex;
	gap: 40rpx;
	margin-bottom: 20rpx;
}

.info-item {
	display: flex;
	align-items: center;
}

.info-label {
	font-size: 24rpx;
	color: #999;
}

.info-value {
	font-size: 24rpx;
	color: #333;
}

/* 元信息一行文本样式 */
.meta-line {
	margin-top: 10rpx;
}
.meta-text {
	color: #888;
	font-size: 24rpx;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price-section {
	display: flex;
	align-items: baseline;
	gap: 8rpx;
}

.price-label {
	font-size: 24rpx;
	color: #999;
}

.price-value {
	font-size: 28rpx;
	color: #ff5722;
	font-weight: bold;
}

.status-section {
	display: flex;
	align-items: center;
}

.status-text {
	font-size: 24rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-weight: bold;
}

.status-available {
	background-color: #e8f5e8;
	color: #52c41a;
}

.status-limited {
	background-color: #fff7e6;
	color: #fa8c16;
}

.status-full {
	background-color: #fff2f0;
	color: #ff4d4f;
}

.status-unknown {
	background-color: #f0f0f0;
	color: #999;
}

/* 新增样式 */
.info-row-top {
	margin-bottom: 0;
}

.info-row-middle {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 0;
}

.distance-text {
	font-size: 24rpx;
	color: #999;
}

.tag-list {
	display: flex;
	gap: 12rpx;
	flex-wrap: wrap;
}

.tag-item {
	font-size: 22rpx;
	color: #666;
	padding: 4rpx 12rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
}

/* 服务设施标签样式 */
.facilities-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	max-width: 100%;
}

.facility-tag {
	background: #f0f8ff;
	color: #007AFF;
	font-size: 20rpx;
	padding: 4rpx 10rpx;
	border-radius: 20rpx;
	flex-shrink: 0;
	white-space: nowrap;
}

.info-row-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.price-section {
	display: flex;
	align-items: baseline;
	gap: 8rpx;
}

.price-label {
	font-size: 22rpx;
	color: #ff5722;
	background: #ffebee;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

/* 加载和空状态样式 */
.loading-container, .empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 40rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 12rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #999;
}

.load-more, .no-more {
	display: flex;
	justify-content: center;
	padding: 40rpx;
}

.load-more-text, .no-more-text {
	font-size: 26rpx;
	color: #999;
}

/* 筛选弹窗样式 */
.filter-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}

.filter-content {
	background-color: #fff;
	width: 100%;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
	overflow: hidden;
}

.filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #eee;
}

.filter-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.filter-close {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.filter-options {
	padding: 20rpx 0;
	max-height: 60vh;
	overflow-y: auto;
}

.filter-option {
	padding: 30rpx 40rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f5f5f5;
}

.filter-option.active {
	background-color: #f0f9ff;
}

.filter-option.active .option-text {
	color: #1890ff;
	font-weight: bold;
}

.option-text {
	font-size: 30rpx;
	color: #333;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
	.filter-section {
		gap: 15rpx;
	}

	.filter-item, .sort-item {
		padding: 10rpx 20rpx;
	}

	.filter-text, .sort-text {
		font-size: 24rpx;
	}

	.card-layout {
		padding: 20rpx 16rpx;
		gap: 20rpx;
	}

	.card-image {
		width: 200rpx;
		height: 190rpx;
	}

	.card-content {
		min-height: 190rpx;
	}
}
</style>
